<template>
    <TableCard ref="table" :data="data"></TableCard>
    <Detail :data="details" @closed = "closeAddOrEdit" v-if = "details.open"></Detail>
</template>

<script setup lang = "ts">
import { SearchBoxColumnType, type TableCardType, type TableSelectOne } from '@/assets/js/utils/entity/TableCardType'
import type { VOrgManagement } from '@/assets/js/vo/organization/orgManagement/VOrgManagement'
import TableCard from '@/components/layout/TableCard.vue'
import { Delete, Edit, Plus } from '@element-plus/icons-vue'
import { onMounted, reactive, ref } from 'vue'
import { queryOrgList, removeOrg } from '@/api/organization/orgManagement'
import { getCodesByGroup } from '@/api/base'
import type { HttpResponse } from '@/assets/js/utils/entity/HttpResponse'
import Detail from './components/Detail.vue'
import { ElMessage } from 'element-plus'

const table = ref()

const closeAddOrEdit = () => {
    table.value.query()
}

const details = reactive<TableSelectOne>({
    open: false,
    title: '新增组织',
    id: null,
    callback: closeAddOrEdit
})

const add = () => {
    details.open = true
    details.id = null
}

const edit = (datas: VOrgManagement[]) => {
    if (!datas.length) {
        ElMessage.warning('请至少选择一条数据进行修改操作！')
        return
    }
    if (datas.length > 1) {
        ElMessage.warning('只能选择一条数据进行修改操作！')
        return
    }
    details.id = datas[0].id
    details.open = true
}

const remove = async (datas: VOrgManagement[]) => {
    const ids: string[] = []
    if (!datas.length) {
        ElMessage.warning('请至少选择一条数据进行删除操作！')
        return
    }
    datas.forEach(item => {
        ids.push(item.id!)
    })
    const res = await removeOrg(ids) as unknown as HttpResponse
    if (res.ok) {
        ElMessage.success('删除成功!')
        table.value.query()
    } else {
        ElMessage.error('删除失败!')
    }
}

onMounted(() => {
    getCodeItems()
})

/**
 * 获取组织机构类型
 */
const getCodeItems = async () => {
    const res = await getCodesByGroup('ORGANIZATION_TYPE') as unknown as HttpResponse
    if (res.ok) {
        const items = res.data
        data.searchBox!.columns![2].items = items
        data.columns![2].items = items
    }
}

const data = reactive<TableCardType<VOrgManagement>>({
    name: '组织管理',
    data: [],
    searchBox: {
        columns: [
            { id: 'name', name: '组织名称', type: SearchBoxColumnType.Text, placeholder: '请输入组织名称' },
            { id: 'code', name: '组织编码', type: SearchBoxColumnType.Text, placeholder: '请输入组织编码' },
            {
                id: 'type', name: '组织类型', type: SearchBoxColumnType.Selection, placeholder: '请选择组织类型', items: []
            }
        ]
    },
    buttons: [
        { name: '新建', type: 'success', onclick: add, icon: Plus },
        { name: '修改', type: 'primary', onclick: edit, icon: Edit },
        { name: '删除', type: 'danger', onclick: remove, icon: Delete },
    ],
    columns: [
        { id: 'name', name: '组织名称', type: SearchBoxColumnType.Text },
        { id: 'code', name: '组织编码', type: SearchBoxColumnType.Text },
        { id: 'type', name: '组织类型', type: SearchBoxColumnType.Selection, items: [] },
        { id: 'leader', name: '组织负责人', type: SearchBoxColumnType.Text },
        { id: 'employNum', name: '员工人数', type: SearchBoxColumnType.Text },
        { id: 'status', name: '组织状态', type: SearchBoxColumnType.Switch }
    ],
    query: queryOrgList
})

</script>

<style lang = "less" scoped></style>